<template>
  <div class="container">
    <el-card>
      <el-row :gutter="30">
        <el-col :span="6">
          <div>库区</div>
          <el-cascader
            v-model="value"
            style="width: 100%"
            :options="CascaderData"
            :props="props"
            @change="handleChange"
          />
        </el-col>
        <el-col :span="6">
          <div>库位编号</div>
          <el-input
            v-model="inputData.code"
            disabled
          />
        </el-col>
        <el-col :span="6">
          <div>库位名称</div>
          <el-input
            v-model="inputData.name"
            placeholder="请输入"
          />
        </el-col>
        <el-col :span="6">
          <div>温度类型</div>
          <el-select
            v-model="inputData.temperatureType"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in temperatureTypeMap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <div>承重类型</div>
          <el-select
            v-model="inputData.bearingType"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in bearingTypeMap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <div>用途属性</div>
          <el-select
            v-model="inputData.useType"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in useTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <div>停用状态</div>
          <el-radio-group v-model="inputData.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <div>承载体积</div>
          <el-input
            v-model="inputData.maxVolume"
            type="number"
            clearable
            placeholder="请输入"
          >
            <template slot="append">m³</template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <div>承载上限</div>
          <el-input
            v-model="inputData.maxNum"
            clearable
            placeholder="请输入"
          >
            <template slot="append">个</template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <div>承载承载重量</div>
          <el-input
            v-model="inputData.maxWeight"
            clearable
            placeholder="请输入"
          >
            <template slot="append">Kg</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="4">
          <div>库位排/列/层</div>
          <el-input
            v-model.number="inputData.locationRow"
            clearable
            placeholder="请输入"
          />
        </el-col>
        <el-col :span="4">
          <div class="white">0</div>
          <el-input
            v-model.number="inputData.locationColumn"
            clearable
            placeholder="请输入"
          />
        </el-col>
        <el-col :span="4">
          <div class="white">0</div>
          <el-input
            v-model.number="inputData.locationLayer"
            clearable
            placeholder="请输入"
          />
        </el-col>
        <el-col :span="4">
          <div>库位长/宽/高</div>
          <el-input
            v-model="inputData.locationLength"
            clearable
            placeholder="请输入"
          >
            <template slot="append">cm</template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <div class="white">0</div>
          <el-input
            v-model="inputData.locationWidth"
            clearable
            placeholder="请输入"
          >
            <template slot="append">cm</template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <div class="white">0</div>
          <el-input
            v-model="inputData.locationHigh"
            clearable
            placeholder="请输入"
          >
            <template slot="append">cm</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        justify="center"
      >
        <el-button @click="goBack">返回</el-button>
        <el-button
          type="primary"
          @click="submit"
        >提交</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getNextCode, getAllWareHouse, addLocation, queryAllArea } from '@/api'
export default {
  data() {
    return {
      value: [],
      // 级联选择器的数据
      CascaderData: [],
      // 输入框双向绑定数据
      inputData: {
        // 下一个编码
        code: '',
        status: 1
      },
      // 温度类型
      temperatureTypeMap: [
        { value: 'CW', label: '常温' },
        { value: 'LC', label: '冷藏' },
        { value: 'HW', label: '恒温' }
      ],
      // 承重类型
      bearingTypeMap: [
        { value: 'ZX', label: '重型' },
        { value: 'BX', label: '中型' },
        { value: 'QX', label: '轻型' }
      ],
      // 用途属性
      useTypeList: [
        { value: 'RKHCQ', label: '入库缓存区' },
        { value: 'CKHCQ', label: '出库缓存区' },
        { value: 'CCQ', label: '存储区' },
        { value: 'FLQ', label: '分拣区' },
        { value: 'ZJQ', label: '质检区' }
      ],
      props: {
        label: 'name',
        value: 'value',
        children: 'children',
        lazy: true,
        lazyLoad: this.lazyLoad
      }
    }
  },
  created() {
    this.getCode()
    // this.getAllWareHouse()
  },
  methods: {
    async lazyLoad(node, back) {
      console.log(node)
      if (!node.data) {
        const { data } = await getAllWareHouse({ status: 1 })
        this.kuList = data
        const nodes = data.map(item => ({
          value: item.id,
          name: item.name,
          leaf: node.level >= 1
          // 节点数,我的只有二级,设置之后点击二级不再出现加载圈
        }))
        back(nodes)
      } else {
        const { data } = await queryAllArea({ warehouseId: node.data.value, status: 1 })
        const nodes = data.map(item => ({
          value: item.id,
          name: item.name,
          leaf: node.level >= 1
          // 节点数,我的只有二级,设置之后点击二级不再出现加载圈
        }))
        back(nodes)
      }
    },
    // 当选中节点变化时触发
    handleChange(val) {
      this.inputData.location = [...val]
      this.inputData.warehouseId = val[0]
      this.inputData.areaId = val[1]
    },
    // 获取下一个编码
    async getCode() {
      const { data } = await getNextCode('KW')
      this.inputData.code = data
    },
    // 获取仓库列表
    async getAllWareHouse() {
      const { data } = await getAllWareHouse()
      console.log(data)
      this.CascaderData = data
    },
    // 提交
    async submit() {
      await addLocation(this.inputData)
      this.$message.success('新增成功！')
      this.$router.replace({ name: 'Location' })
    },
    // 返回
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 25px;
}
.el-radio-group {
  margin-top: 10px;
}
.el-input-group__append {
  padding: 0 7px;
}
.el-row {
  margin-bottom: 15px;
}
.el-col div {
  margin-bottom: 10px;
  color: #887e7e;
  font-size: 12px;
}
.el-col .white {
  color: #fff;
}
.el-button {
  border-radius: 50px;
  width: 150px;
  margin-top: 15px;
}

// /deep/ input::-webkit-outer-spin-button,
// /deep/ input::-webkit-inner-spin-button {
//   -webkit-appearance: none;
// }

// /deep/ input[type="number"] {
//   -moz-appearance: textfield;
// }
</style>
